<template>
	<view class="layer" v-if="show">
		<view class="layer_bg" @click="cancel"></view>

		<view class="layer_body">
			<view class="layer_body_close" @click="cancel">
				<rui-icons icon="close" color="#888"></rui-icons>
			</view>

			<view class="layer_body_product">
				<view class="layer_body_product_name">
					{{data.name}}
				</view>
				<image :src="data.image" class="layer_body_product_image" mode=""></image>
				<view class="layer_body_product_tips">
					发现新设备是否连接？
				</view>
			</view>
			<view class="layer_body_btn">
				<button class="layer_body_btn_cannel" @click="cancel">取消</button>
				<button class="layer_body_btn_success" @click="change">连接</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";

	let show = ref(false)
	let data = ref({})
	const open = (d) => {
		data.value = d
		show.value = true;
	}

	const emits = defineEmits(['change', 'cancel'])
	const change = () => {
		emits('change', data.value)
	}
	
	const cancel = () => {
		show.value = false;
		emits('cancel')
	}
	defineExpose({
		open,
		cancel
	})
</script>

<style lang="scss" scoped>
	@keyframes up {
		from {
			transform: translate3d(0, 100%, 0);
			opacity: .3
		}

		to {
			transform: translate3d(0, 0, 0);
			opacity: 1
		}
	}

	.layer {

		&_bg {
			width: 100%;
			height: 100%;
			background: rgba(0, 0, 0, .2);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 999;

		}

		&_body {
			background: #fff;
			border-radius: 20rpx;
			position: fixed;
			bottom: 0;
			width: calc(100% - 120rpx);
			margin: 30rpx;
			z-index: 9999;
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .05);
			overflow: hidden;
			padding-bottom: 30rpx;
			height: auto;
			animation: up .5s both;
			padding: 60rpx 30rpx;
			min-height: 200rpx;

			&_product {
				text-align: center;

				&_name {
					font-weight: bold;
					font-size: 36rpx;
				}

				&_image {
					width: 300rpx;
					height: 300rpx;
					margin: 50rpx 0;
				}

				&_tips {
					color: #999;
				}
			}

			&_btn {
				display: flex;
				justify-content: center;
				margin-top: 60rpx;

				&_cannel {
					width: 220rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 80rpx;
					background: #eee;
					font-size: 30rpx;

					&::after {
						border: none;
					}
				}

				&_success {
					width: 220rpx;
					height: 80rpx;
					line-height: 80rpx;
					border-radius: 80rpx;
					background: var(--color);
					color: #fff;
					font-size: 30rpx;

					&::after {
						border: none;
					}
				}
			}

			&_close {
				background: #eee;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				text-align: center;
				line-height: 60rpx;
				position: absolute;
				top: 30rpx;
				right: 30rpx;
			}
		}
	}
</style>